Pseudo-elements like ::before and ::after can be used to add decorative or functional elements without extra HTML. By combining them with relative units and media queries, you can adjust their size, position, and visibility across different screen sizes.

Key Points

1
Pseudo-elements can add visual cues or highlights that adapt to screen size.
2
Use relative units like %, em, or rem for width, height, and positioning to maintain responsiveness.
3
Media queries can modify pseudo-element styles such as size, position, or visibility at different breakpoints.
4
Combine with CSS positioning to ensure pseudo-elements align correctly in responsive layouts.

Example: Responsive Decorative Dot with ::after

In this example, a small red dot is added to the .box using ::after. When the screen width is 600px or less, the dot becomes smaller and is repositioned, showing how pseudo-elements can respond to different screen sizes.

Best Practices

1
Use relative units to allow pseudo-elements to scale with their parent.
2
Use media queries to adjust or hide pseudo-elements for smaller screens.
3
Test across devices to ensure pseudo-elements do not disrupt layout.
4
Avoid using pseudo-elements for essential content; they should enhance design visually.

Difficulty: 6/10

Topics: pseudo-element positioning, responsive pseudo-content, CSS performance with pseudo-elements

Scenario Questions

0-2 years experience

1
How would you use ::before to add a decorative icon next to a link that should hide on screens under 480px?
2
What happens if you set content: '•' on a ::after pseudo-element but forget to set display: inline-block on it in a responsive grid?

2-5 years experience

1
A tooltip built with ::before and ::after breaks when the page is zoomed to 150% — what’s likely going wrong, and how would you fix it?
2
Your team’s button component uses pseudo-elements for hover effects, but QA reports inconsistent rendering on Safari — what would you check first?

5-8 years experience

1
You’re optimizing a high-traffic landing page and notice layout thrashing during resize — how would you evaluate whether pseudo-elements are contributing, and what alternatives would you consider?
2
How would you design a scalable system for responsive callout banners using pseudo-elements across 20+ components without creating CSS bloat or maintenance nightmares?

8+ years experience

1
Your company is migrating from a legacy CSS framework that heavily relied on pseudo-elements for layout — how would you approach deprecating them without breaking existing UIs or introducing accessibility regressions?
2
You’re designing a design system for a global product with 12 languages and RTL support — how do pseudo-elements complicate localization and bidirectional text, and what architectural decisions would you make to future-proof it?

Follow-up Questions

❓How would you debug a pseudo-element that disappears on mobile but works on desktop?
❓What accessibility concerns arise when using pseudo-elements for critical UI cues?
❓When would you avoid using pseudo-elements even if the design seems to call for them?